<template>
  <div class="reviews-page bg-white dark:bg-gray-900 min-h-screen">
    <!-- 页面标题和筛选器 -->
    <div class="page-header p-6 border-b dark:border-gray-700">
      <div class="flex justify-between items-center">
        <div class="header-left">
          <h2 class="text-2xl font-bold dark:text-white">评价管理</h2>
        </div>
        <div class="header-right">
          <a-radio-group v-model="filterType" type="button">
            <a-radio value="all">全部评价</a-radio>
            <a-radio value="pending">待回复</a-radio>
            <a-radio value="replied">已回复</a-radio>
          </a-radio-group>
        </div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-area p-6 bg-gray-50 dark:bg-gray-800">
      <a-form :model="searchForm" layout="inline">
        <a-form-item field="keyword" label="搜索">
          <a-input
            v-model="searchForm.keyword"
            placeholder="房型名称/评价内容/用户名"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="rating" label="评分">
          <a-select
            v-model="searchForm.rating"
            placeholder="请选择评分"
            allow-clear
            style="width: 120px"
          >
            <a-option value="5">5星</a-option>
            <a-option value="4">4星</a-option>
            <a-option value="3">3星</a-option>
            <a-option value="2">2星</a-option>
            <a-option value="1">1星</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="roomType" label="房型">
          <a-select
            v-model="searchForm.roomType"
            placeholder="请选择房型"
            allow-clear
            style="width: 160px"
          >
            <a-option v-for="type in roomTypes" :key="type.id" :value="type.id">
              {{ type.name }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="dateRange" label="评价时间">
          <a-range-picker v-model="searchForm.dateRange" style="width: 260px" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>

    <!-- 评价列表 -->
    <div class="review-list p-6">
      <a-table
        :data="reviewList"
        :columns="columns"
        :pagination="pagination"
        class="dark:bg-gray-800"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
        @sorter-change="handleTableSort"
      >
        <!-- 房型信息列 -->
        <template #room="{ record }">
          <div class="room-info flex items-center">
            <a-image
              :src="record.room.image"
              :width="80"
              :height="60"
              fit="cover"
              class="rounded"
            />
            <div class="ml-3">
              <div class="font-medium dark:text-white">
                {{ record.room.name }}
              </div>
              <div class="text-gray-500 dark:text-gray-400 text-sm">
                {{ record.room.type }}
              </div>
            </div>
          </div>
        </template>

        <!-- 评价内容列 -->
        <template #content="{ record }">
          <div class="review-content">
            <div class="rating flex items-center mb-2">
              <a-rate :model-value="record.rating" readonly />
              <span class="ml-2 text-gray-500 dark:text-gray-400"
                >{{ record.rating }}分</span
              >
            </div>
            <div class="content-text text-gray-700 dark:text-gray-300">
              {{ record.content }}
            </div>
            <div v-if="record.images?.length" class="content-images mt-2">
              <a-image-preview-group infinite>
                <a-image
                  v-for="(image, index) in record.images"
                  :key="index"
                  :src="image"
                  :width="60"
                  :height="60"
                  fit="cover"
                  class="mr-2 rounded"
                />
              </a-image-preview-group>
            </div>
            <div class="text-gray-500 dark:text-gray-400 text-sm mt-2">
              {{ record.createTime }}
            </div>
          </div>
        </template>

        <!-- 用户信息列 -->
        <template #user="{ record }">
          <div class="user-info flex items-center">
            <a-avatar :size="32" :src="record.user.avatar" />
            <span class="ml-2 dark:text-gray-300">{{ record.user.name }}</span>
          </div>
        </template>

        <!-- 商家回复列 -->
        <template #reply="{ record }">
          <div v-if="record.reply" class="reply-content">
            <div class="reply-text text-gray-700 dark:text-gray-300">
              {{ record.reply.content }}
            </div>
            <div
              class="reply-time text-gray-500 dark:text-gray-400 text-sm mt-1"
            >
              {{ record.reply.createTime }}
            </div>
          </div>
          <a-button
            v-else
            type="primary"
            size="small"
            @click="handleReply(record)"
          >
            回复
          </a-button>
        </template>

        <!-- 操作列 -->
        <template #operations="{ record }">
          <a-space>
            <a-button
              v-if="record.reply"
              type="text"
              size="small"
              class="dark:text-blue-400"
              @click="handleEditReply(record)"
            >
              编辑回复
            </a-button>
            <a-button
              type="text"
              status="danger"
              size="small"
              class="dark:text-red-400"
              @click="handleDelete(record)"
            >
              删除
            </a-button>
          </a-space>
        </template>
      </a-table>
    </div>

    <!-- 回复弹窗 -->
    <a-modal
      v-model:visible="replyModalVisible"
      :title="editingReply ? '编辑回复' : '回复评价'"
      @cancel="cancelReply"
      @before-ok="handleReplySubmit"
      class="dark:bg-gray-800"
    >
      <a-form :model="replyForm">
        <a-form-item
          field="content"
          label="回复内容"
          required
          class="dark:text-gray-300"
        >
          <a-textarea
            v-model="replyForm.content"
            :placeholder="editingReply ? '修改回复内容' : '请输入回复内容'"
            :max-length="500"
            show-word-limit
            allow-clear
            :rows="4"
            class="dark:bg-gray-700 dark:text-gray-300"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import { IconSearch, IconRefresh } from "@arco-design/web-vue/es/icon";

// 筛选类型
const filterType = ref("all");

// 搜索表单
const searchForm = reactive({
  keyword: "",
  rating: null,
  roomType: "",
  dateRange: [],
});

// 房型列表
const roomTypes = [
  { id: 1, name: "标准单人房" },
  { id: 2, name: "标准双人房" },
  { id: 3, name: "豪华大床房" },
  { id: 4, name: "豪华套房" },
];

// 表格列配置
const columns = [
  {
    title: "房型信息",
    slotName: "room",
    width: 260,
    sortable: true,
    dataIndex: "room.name",
  },
  {
    title: "评价内容",
    slotName: "content",
    sortable: true,
    dataIndex: "rating",
  },
  {
    title: "用户信息",
    slotName: "user",
    width: 160,
  },
  {
    title: "商家回复",
    slotName: "reply",
    width: 200,
  },
  {
    title: "评价时间",
    dataIndex: "createTime",
    width: 160,
    sortable: true,
  },
  {
    title: "操作",
    slotName: "operations",
    width: 160,
    fixed: "right",
  },
];

// 分页配置
const pagination = reactive({
  total: 100,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
});

// 评价列表数据
const reviewList = ref([
  {
    id: 1,
    room: {
      name: "豪华大床房",
      type: "大床房",
      image: "/images/rooms/deluxe-king.jpg",
    },
    rating: 5,
    content: "房间很干净，服务很好，位置也很方便，下次还会选择这家酒店。",
    images: ["/images/reviews/review1-1.jpg", "/images/reviews/review1-2.jpg"],
    user: {
      name: "张三",
      avatar: "/images/avatars/user1.jpg",
    },
    createTime: "2024-03-18 18:30:00",
    reply: {
      content: "感谢您的好评！我们会继续努力提供更好的服务。",
      createTime: "2024-03-19 09:00:00",
    },
  },
]);

// 回复相关
const replyModalVisible = ref(false);
const editingReply = ref(false);
const currentReview = ref(null);
const replyForm = reactive({
  content: "",
});

// 搜索
const handleSearch = () => {
  // 实现搜索逻辑
};

// 重置搜索
const handleReset = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  handleSearch();
};

// 回复评价
const handleReply = (review) => {
  currentReview.value = review;
  editingReply.value = false;
  replyForm.content = "";
  replyModalVisible.value = true;
};

// 编辑回复
const handleEditReply = (review) => {
  currentReview.value = review;
  editingReply.value = true;
  replyForm.content = review.reply.content;
  replyModalVisible.value = true;
};

// 取消回复
const cancelReply = () => {
  currentReview.value = null;
  replyForm.content = "";
  replyModalVisible.value = false;
};

// 提交回复
const handleReplySubmit = async () => {
  try {
    // 实现回复提交逻辑
    await new Promise((resolve) => setTimeout(resolve, 1000));
    Message.success(editingReply.value ? "修改回复成功" : "回复成功");
    replyModalVisible.value = false;
    cancelReply();
    return true;
  } catch (error) {
    Message.error(editingReply.value ? "修改回复失败" : "回复失败");
    return false;
  }
};

// 删除评价
const handleDelete = async (review) => {
  try {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    Message.success("删除成功");
    handleSearch();
  } catch (error) {
    Message.error("删除失败");
  }
};

// 分页相关方法
const onPageChange = (current) => {
  pagination.current = current;
  handleSearch();
};

const onPageSizeChange = (pageSize) => {
  pagination.pageSize = pageSize;
  pagination.current = 1;
  handleSearch();
};

// 排序处理
const handleTableSort = (data) => {
  const { field, direction } = data;
  // 根据字段和排序方向处理数据
  if (direction === "ascend") {
    reviewList.value.sort((a, b) => (a[field] > b[field] ? 1 : -1));
  } else if (direction === "descend") {
    reviewList.value.sort((a, b) => (a[field] < b[field] ? 1 : -1));
  }
};
</script>

<style lang="less" scoped>
.reviews-page {
  .page-header {
    border-color: var(--color-neutral-3);
  }

  .search-area {
    background-color: var(--color-fill-2);
  }

  :deep(.arco-table-th) {
    background-color: var(--color-bg-2);
    &.dark {
      background-color: #1f2937;
      color: #e5e7eb;
    }
  }

  :deep(.arco-table-td) {
    &.dark {
      background-color: #1f2937;
      color: #e5e7eb;
    }
  }

  :deep(.arco-modal) {
    &.dark {
      background-color: #1f2937;
      .arco-modal-header {
        background-color: #1f2937;
        color: #e5e7eb;
      }
      .arco-modal-content {
        background-color: #1f2937;
        color: #e5e7eb;
      }
    }
  }

  :deep(.arco-table-tr:hover) {
    background-color: var(--color-fill-2);
  }

  :deep(.arco-modal-body) {
    max-height: 70vh;
    overflow-y: auto;
  }

  :deep(.arco-table) {
    .arco-table-th {
      .arco-table-cell {
        padding: 12px 16px;

        &.arco-table-cell-with-sorter {
          padding-right: 30px;
          cursor: pointer;

          .arco-table-cell-with-sort {
            margin-right: 4px;
          }
        }
      }

      .arco-table-column-sort {
        margin-left: 4px;
        color: var(--color-text-3);
      }
    }

    .arco-table-col-sorted {
      background-color: var(--color-fill-2);
    }
  }
}
</style>
